<template>
  <div>
    <el-card style="border-radius: 0">
      <div slot="header">
        <span>概况</span>
      </div>
      <div class="wave">

      </div>
      <div class="demo">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="grid-content ">
              <div style="padding: 10px;background: #673AB7">
                <i class="el-icon-location-outline index-icon"></i>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos earum enim fugiat
                illum iusto minus modi nam natus nisi sequi!
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content ">
              <div style="padding: 10px;background: #3c8dbc">
                <i class="el-icon-picture index-icon"></i>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos earum enim fugiat
                illum iusto minus modi nam natus nisi sequi!
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content ">
              <div style="padding: 10px;background: #009688">
                <i class="el-icon-service index-icon"></i>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos earum enim fugiat
                illum iusto minus modi nam natus nisi sequi!
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content ">
              <div style="padding: 10px;background: #607D8B">
                <i class="el-icon-bell index-icon"></i>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos earum enim fugiat
                illum iusto minus modi nam natus nisi sequi!
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <br>
  </div>
</template>

<script>
  export default {
    data() {
      return {}
    },
    methods: {},
    mounted: function () {

    }
  }
</script>
<style lang="less">
  .demo {
    margin: 10px;
    .grid-content {
      border-radius: 4px;
      overflow: hidden;
      color: #fff;
      background: #d3dce6;
      .index-icon {
        font-size: 82px;
        color: #fff;
      }
    }
  }


  /*                   .wave {*/
  /*                     position: relative;*/
  /*                     width: 150px;*/
  /*                     height: 150px;*/
  /*                     background-color: #5291e0;*/
  /*                     overflow: hidden;*/


  /*                     &::before,*/
  /*                     &::after {*/
  /*                       content: "";*/
  /*                       position: absolute;*/
  /*                       left: 50%;*/
  /*                       bottom: 15%;*/
  /*                       width: 500%;*/
  /*                       height: 500%;*/
  /*                       border-radius: 45%;*/
  /*                       background-color: #eee;*/
  /*                       transform: translateX(-50%); // 居中*/
  /*                       animation: rotate 15s linear infinite;*/
  /*                     }*/
  /*                     &::before {*/
  /*                       bottom: 10%;*/
  /*                       opacity: .5;*/
  /*                       border-radius: 47%;*/
  /*                     }*/
  /*                   }*/


  /*// 旋转动画*/
  /*@keyframes rotate {*/
  /*  from {*/
  /*    transform: translateX(-50%) rotateZ(0deg);*/
  /*  }*/

  /*  to {*/
  /*    transform: translateX(-50%) rotateZ(360deg);*/
  /*  }*/
  /*}*/




</style>
